<script lang="ts" setup>
import { defineProps } from 'vue'

const props = defineProps({
  sidebarOpen: {
    type: Boolean,
    default: true,
  },
})
</script>

<template>
  <div
    :class="{
      'w-65': sidebarOpen,
      'w-16': !sidebarOpen,
    }"
    class="h-full bg-white shadow-sm overflow-y-hidden hover:overflow-y-auto overflow-x-hidden flex-shrink-0 relative"
  >
    <!-- 侧边栏内容 -->
      <el-menu
        default-active="1"
        class="h-full w-65"
        router
        :collapse="!sidebarOpen"
        :collapse-transition="false"
        collapse-tooltip
      >
        <!-- 首页 -->
        <el-menu-item index="/dashboard">
          <el-icon>
            <svg-icon name="home" />
          </el-icon>
          <template #title>Dashboard</template>
        </el-menu-item>
        <!-- 权限管理 -->
        <el-sub-menu index="/permission">
          <template #title>
            <el-icon>
              <svg-icon name="permission" />
            </el-icon>
            <span>权限管理</span>
          </template>
          <el-menu-item index="/users">
            <template #title>
              <el-icon>
                <svg-icon name="user" />
              </el-icon>
              <span>用户管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/role">
            <template #title>
              <el-icon>
                <svg-icon name="role" />
              </el-icon>
              <span>角色管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/menu">
            <template #title>
              <el-icon>
                <svg-icon name="menu" />
              </el-icon>
              <span>菜单管理</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
        <!-- 组织架构 -->
        <el-sub-menu index="/organization">
          <template #title>
            <el-icon>
              <svg-icon name="organizational-structure" />
            </el-icon>
            <span>组织架构</span>
          </template>
          <el-menu-item index="department">
            <template #title>
              <el-icon>
                <svg-icon name="department-details" />
              </el-icon>
              <span>部门管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/position">
            <template #title>
              <el-icon>
                <svg-icon name="position" />
              </el-icon>
              <span>岗位管理</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
        <!-- 日志管理 -->
        <el-sub-menu index="/logs">
          <template #title>
            <el-icon>
              <svg-icon name="log" />
            </el-icon>
            <span>日志管理</span>
          </template>
          <el-menu-item index="/logs/operation">
            <template #title>
              <el-icon>
                <svg-icon name="login-log" />
              </el-icon>
              <span>登录日志</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/logs/operation">
            <template #title>
              <el-icon>
                <svg-icon name="operation-log" />
              </el-icon>
              <span>操作日志</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/logs/system">
            <template #title>
              <el-icon>
                <svg-icon name="system-log" />
              </el-icon>
              <span>系统日志</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
        <!-- 系统设置 -->
        <el-menu-item index="/settings">
          <el-icon>
            <svg-icon name="settings" />
          </el-icon>
          <template #title>
            <span>系统设置</span>
          </template>
        </el-menu-item>
      </el-menu>
  </div>
</template>

<style scoped>
.el-menu {
  border: none;
}
</style>
